﻿@model HelloMVC.Model.StepFamily
    @{String parentIssueKey = Model.Self.ProjectKey + "-" + Model.Self.Id;
      String issueId = "ag-issue-" + parentIssueKey;
      }
    <div id="@(issueId)-family" class="ag-step-family" style="background-color: rgb(234, 191, 255); z-index: 500;">
        <div id="@(issueId)" class="ag-step-parent">
            <div  class="ag-issue ag-has-subtask ag-has-corner">
                <div class="ag-issue-inner">
                    <div id="@(issueId)_status" class="ag-issue-field ag-issue-field-text ag-issue-corner">
                        <div class="ag-edit-non" title="Status"><a title="status" href="#">In Progress</a></div>
                    </div>
                    <div class="ag-subhead">
                        <div class="ag-issue-ico-wrap">
                            <div class="ag-issue-type icon-@Model.Self.Type"></div>
                            <div class="ag-issue-priority icon-@Model.Self.Priority"></div>
                        </div>
                        <div class="ag-issue-key-wrap">
                            <div class="ag-issue-key">
                                <a title="View Issue" href="#">
                                    <em>@Model.Self.ProjectKey</em>
                                    <small>-</small>
                                    <span>@Model.Self.Id</span>
                                </a>
                            </div>
                            <div class="ag-issue-related">
                                <a title="list the sub issues" href="#">@(Model.SubTotal) subs</a>
                                <span class="ag-icon ag-icon-twix ag-close" onclick="showOrhide('@(issueId)-children', this)"></span>
                            </div>
                        </div>
                    </div>
                    <div class="ag-issue-body">
                        <div id="-1_@(parentIssueKey)_summary" class="ag-issue-field" style="width:34%;">
                            <div class="ag-edit-non">@Model.Self.Summary</div>
                        </div>
                        <div id="-1_@(parentIssueKey)_components" class="ag-issue-field" style="width:11%;">
                            <div class="ag-edit-non"><a href="#">@Model.Self.Component</a></div>
                        </div>
                        <div id="-1_@(parentIssueKey)_fixversions" class="ag-issue-field" style="width:22%;">
                            <div class="ag-edit-non"><a href="#">@Model.Self.Version</a></div>
                        </div>
                        <div id="-1_@(parentIssueKey)_timeestimate" class="ag-issue-field" style="width:11%;">
                            <div class="ag-edit-non">
                                <span title="Remaining">
                                    <span class="ag-sigma">Σ</span>@(Model.Self.OriginalEstimate)h
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="@(issueId)-children" class="ag-step-children ag-cards ag-cards-small" style="display:none;">
            <script type="text/javascript">
                aodraggable.push({ container: "#@(issueId)-children" });
                aodroppable.push({ self: "#@(issueId)-outer-0", accepts: "#@(issueId)-outer-1 .ag-issue-wrapper, #@(issueId)-outer-2 .ag-issue-wrapper", status: "ToDo", updatePanel: "#@(issueId)-family" });
                aodroppable.push({ self: "#@(issueId)-outer-1", accepts: "#@(issueId)-outer-0 .ag-issue-wrapper, #@(issueId)-outer-2 .ag-issue-wrapper", status: "InProgress", updatePanel: "#@(issueId)-family" });
                aodroppable.push({ self: "#@(issueId)-outer-2", accepts: "#@(issueId)-outer-0 .ag-issue-wrapper, #@(issueId)-outer-1 .ag-issue-wrapper", status: "Done", updatePanel: "#@(issueId)-family" });
            </script>
            <div id="@(issueId)-toggle">
                <div class="ag-inner">
                    <div id="@(issueId)-outer-0">
                        <div id="ag-step-0-@(parentIssueKey)" class="ag-step-col" style="min-height: 173px;">
                            <div id="ag-step-issues-0-@(parentIssueKey)">
                            @if (Model.ToDo.Count > 0)
                            {
                                <div class="ag-step-col-header">
                                    <ul class="ag-step-col-info">
                                        <li class="ag-step-qty">
                                            @(Model.ToDo.Count + (Model.ToDo.Count == 1?" issue":" issues"))<span> - 1h</span>
                                        </li>
                                        <li class="ag-icon ag-icon-issuenav"></li>
                                    </ul>
                                </div>
                                @Html.Partial("~/Areas/DashBoard/Views/Shared/DisplayTemplates/IssueSmallCard.cshtml", Model.ToDo)
                            }
                            </div>
                        </div>
                    </div>
                    <div id="@(issueId)-outer-1">
                        <div id="ag-step-1-@(parentIssueKey)" class="ag-step-col" style="min-height: 173px;">
                            <div id="ag-step-issues-1-@(parentIssueKey)">
                            @if (Model.InProgress.Count > 0)
                            {
                                <div class="ag-step-col-header">
                                    <ul class="ag-step-col-info">
                                        <li class="ag-step-qty">
                                            @(Model.InProgress.Count + (Model.InProgress.Count == 1?" issue":" issues"))<span> - 1h</span>
                                        </li>
                                        <li class="ag-icon ag-icon-issuenav"></li>
                                    </ul>
                                </div>
                                @Html.Partial("~/Areas/DashBoard/Views/Shared/DisplayTemplates/IssueSmallCard.cshtml", Model.InProgress)
                            }
                            </div>
                        </div>
                    </div>
                    <div id="@(issueId)-outer-2">
                        <div id="ag-step-2-@(parentIssueKey)" class="ag-step-col" style="min-height: 173px;">
                            <div id="ag-step-issues-2-@(parentIssueKey)">
                            @if(Model.Done.Count > 0)
                            {
                                <div class="ag-step-col-header">
                                    <ul class="ag-step-col-info">
                                        <li class="ag-step-qty">
                                            @(Model.Done.Count + (Model.Done.Count == 1?" issue":" issues"))<span> - 1h</span>
                                        </li>
                                        <li class="ag-icon ag-icon-issuenav"></li>
                                    </ul>
                                </div>
                                @Html.Partial("~/Areas/DashBoard/Views/Shared/DisplayTemplates/IssueSmallCard.cshtml", Model.Done)
                            }
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>